import Vue from 'vue'
// 引入vue-router组件
import VueRouter from 'vue-router'

// Nprogress 是做页面切换的进度条效果
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'// nprogress样式文件

// import Login from '../views/login/login.vue'
// import Layout from '../views/layout/layout.vue'
// import Images from '../views/images/images.vue'
// import Home from '../views/home/home.vue'
// import Articles from '../views/articles/articles.vue'
// import Edit from '../views/articles/edit'
// import AddArticle from '../views/articles/addArticle'
// import Comment from '../views/comment/comment.vue'
// import Fans from '../views/fans/fans.vue'
// import Settings from '../views/settings/settings.vue'

const Login = () => import(/* webpackChunkName: "login" */ '../views/login/login.vue')

const Layout = () => import(/* webpackChunkName: "Layout" */ '../views/layout/layout.vue')
const Images = () => import(/* webpackChunkName: "Images" */ '../views/images/images.vue')
const Articles = () => import(/* webpackChunkName: "Articles" */ '../views/articles/articles.vue')
const Home = () => import(/* webpackChunkName: "Home" */ '../views/home/home.vue')
const Edit = () => import(/* webpackChunkName: "Edit" */ '@/views/articles/edit.vue')
const AddArticle = () => import(/* webpackChunkName: "AddArticle" */ '@/views/articles/addArticle.vue')
const Comment = () => import(/* webpackChunkName: "Comment" */ '@/views/comment/comment.vue')
const Fans = () => import(/* webpackChunkName: "Fans" */ '@/views/fans/fans.vue')
const Page404 = () => import(/* webpackChunkName: "Page404" */ '@/views/page404/page404.vue')

// 路由懒加载
// 把原先的import写法，改成箭头函数的写法
// import Settings from '@/views/settings/settings.vue'
const Settings = () => import(/* webpackChunkName: "settings" */ '../views/settings/settings.vue')
// 使用vue - router组件
Vue.use(VueRouter)

const router = new VueRouter({
  // 配置路由
  routes: [
    // 登陆
    { path: '/login', component: Login },
    // 主页
    {
      path: '/',
      component: Layout,
      children: [
        // path: '', 相当于是默认显示的页面
        { path: '', component: Home, isVip: true },
        // 内容管理
        {
          path: '/articles',
          component: Articles,
          meta: {
            title: '内容管理',
            isVip: true
          }
        },
        // 编辑文章 动态路由-它会匹配所有/edit/xxxxxx的格式
        { name: 'edit', isVip: true, path: '/edit/:id', component: Edit },
        // 素材管理
        {
          path: '/image',
          component: Images,
          meta: {
            isVip: true,
            title: '素材管理'
          }
        },
        // 发布文章
        {
          path: 'addArticle',
          component: AddArticle,
          meta: {
            title: '发布文章',
            isVip: true
          }
        },
        // 评论管理
        {
          path: 'comment',
          component: Comment,
          meta: {
            title: '评论管理',
            isVip: true
          }
        },
        // 粉丝管理
        {
          path: 'fans',
          component: Fans,
          meta: {
            title: '粉丝管理',
            isVip: true
          }
        },
        // 个人设置
        {
          path: 'settings',
          component: Settings,
          meta: {
            title: '个人设置',
            isVip: true
          }
        }
      ]
    },
    {
      path: '*',
      component: Page404
    }
  ]
})

// 路由导航守卫
//     只要是发生了路由的跳转（还没有进入到目标路由的页面），就会执行这个回调
// to: 要跳入的路由信息。  你要去哪里
// from: 要跳出的路由信息。你从哪里来
// next: 是一个函数，放行方法
//   - next() : 正确跳转。允许进入到 to 路由
//   - next(路由地址) : 不允许去to，而转去指定的路由地址
// 如果没有调用next()，则页面就不能正常显示了

// const vipPages = ['/', '/articles', '/images', '/login123']

router.beforeEach((to, from, next) => {
  // 所有路由跳转都会进入这个函数

  // 开始动画
  NProgress.start()
  // 动态设置标题
  // 当前的标题应该是在to这个对象中
  console.log('当前的标题', to.meta)
  if (to.meta.title) {
    document.title = '黑马头条 | ' + to.meta.title
  } else {
    document.title = '黑马头条'
  }

  const tokenStr = localStorage.getItem('tokenStr')
  // 1. 有些页面是必须要登陆之后才能访问的
  console.log('路由变化了, 从', from.path, '去到', to.path)
  // if( 你要去的页面是在vipages中 并且你又没有token) {
  // includes: 数组的一个方法，用来判断一个元素是否在数组中存在
  // if (vipPages.includes(to.path) && !tokenStr) {
  if (to.meta.isVip && !tokenStr) {
    console.log('没有登陆，是不是访问vip的')
    next('/login')
  } else if (to.path === '/login' && tokenStr) {
    // if( 你要去的页面/是login 并且你又有token) {
    next('/')
  } else {
    next()
  }
})

router.afterEach(() => {
  // 路由切换结束 关闭动画
  NProgress.done()
})

export default router
